@import "app/styles/mixins"
@import "app/styles/bootstrap/variables"
@import "app/styles/style-flat-variables"

#courses-view
  h1
    margin-bottom: 30px

  #announcement
    @if $is-codecombat
      margin: 20px 60px
    @else
      background-color: #cff2fc
      border-radius: 10px
      padding: 20px
      margin: 20px 80px 40px 80px
    p
      margin-bottom: 7px

  #main-content
    @if not $is-codecombat
      max-width: 720px
      margin: 0 auto
    @else
      max-width: 816px
      padding: 0 20px
      margin: 0 auto
      border-style: solid
      border-image: url(/images/level/code_palette_wood_background.png) 118 48 110 48 fill round
      border-width: 118px 48px 110px 48px
      border-top-width: 0
      position: relative

      @media only screen and (max-width: 991px)
        .student-profile-area
          width: 100%
          margin-left: auto
          background-image: none

          .current-hero
            display: none

      .main-content-preload-backdrop
        // Nice background contrast before image loads so contrast doesn't get crazy
        background: linear-gradient(to top, #cabea1, #d6cab3)
        position: absolute
        top: 0px
        left: 20px
        bottom: 0px
        right: 20px
        z-index: -1

      h3
        color: $yellow
        font-family: $headline-font
        font-variant: small-caps
        text-shadow: 0px 1px 1px black, -1px 0px 1px black, 1px 0px 1px black, 0px -1px 1px black

  #play-now-to-learn-header
    @if $is-codecombat
      margin-top: 50px
    @else
      margin-top: 60px

  #benefits-ul
    @if $is-codecombat
      margin: 0 auto
      padding-bottom: 20px
      width: 420px
    @else
      margin: 0 auto 40px
      width: 360px

  hr
    border-top: 1px solid grey
    margin: 5px 0
    padding-bottom: 20px
    opacity: 0.5

  .view-levels-btn, .view-challenges-link, .view-videos-link, .view-announcement-link
    font-size: 13px
    padding-left: 10px

  .view-project-gallery-link
    font-size: 13px
    padding-left: 10px
    float: right

  .text-uppercase
    margin-top: 40px

  @if $is-codecombat
    #just-added-text
      text-align: right

    .classroom, #join-class-form, .anonymous-welcome-message, #announcement
      border-style: solid
      border-image: url(/images/level/popover_border_background.png) 16 12 fill round
      padding: 0 5px
      border-width: 16px 12px

    .classroom.just-added
      box-shadow: $yellow 0 0 10px

    .anonymous-welcome-message
      padding-top: 20px

    .class-break
      border-top: 0
  @else
    #just-added-text
      color: #009999

    .just-added
      border: 1px solid #009999
      margin: 0 -20px
      padding: 0 20px

  .course-instance-entry
    padding-bottom: 10px

    .progress-bar
      min-width: 15%
      @if $is-codecombat
        background-color: #21572b

    .btn
      margin-left: 20px
      min-width: 180px

  #join-class-form
    @if $is-codecombat
      padding-bottom: 30px

    .alert, .progress
      margin-top: 20px

  .tile-header
      margin-bottom: 5px

  @if $is-codecombat
    .style-flat
      background-color: transparent

    #site-content-area
      background: transparent url(/images/pages/play/portal-background.png)
      border: 1px solid #314545

    #footer, #site-footer
      margin-top: 0

    .student-profile-area
      width: 1210px
      padding: 10px 60px 60px 60px
      margin-left: calc(0px - (1210px - 680px) / 2)
      background: #d6cab3 url(/images/pages/play/modal/parental_prompt_modal_background.png) no-repeat
      //background-size: cover
      // Doesn't work because rough transparent edge shows background color below; gotta make image a bit bigger than pre-image-load solid fill
      background-size: 100.4% auto
      background-position: bottom
      border-radius: 6px

      h2
        color: $yellow
        font-family: $headline-font
        font-variant: small-caps
        text-shadow: 0px 1px 1px black, -1px 0px 1px black, 1px 0px 1px black, 0px -1px 1px black
        font-size: 22px
        text-align: center
        font-weight: bold

    .student-container
      margin-bottom: 5px

    // Hero display
    .current-hero
      cursor: pointer
      h2.current-hero-text
        line-height: 18px
        margin: 10px 0 5px 0
        color: black
        text-shadow: none

      .hero-avatar
        margin-right: 8px

        img
          max-width: 100%
          max-height: 120px

          &.hero-captain
            // Captain faces left normally, others face right
            transform: scaleX(-1)

    .change-hero-btn, .more-ai-league-tiles
      font-size: 13px
      font-weight: normal
  @else
    .current-hero-container
      display: flex
      justify-content: center

      .current-hero-text
        font-size: 16pt

      .hero-avatar
        background-color: #f8f8f8
        box-shadow: 0 0 0 1px gray
        margin-right: 25px

      .current-hero-right-col
        display: flex
        flex-direction: column
        justify-content: space-between
        align-items: flex-start

  .certificate-link
    text-align: left
    text-decoration: underline
    font-style: italic
    font-weight: bold
    font-size: 16px
    color: black
    img
      margin-right: 15px
    div
      display: inline

  a.tile
    display: block
    width: 100%
    position: relative
    margin-bottom: 6px
    text-shadow: 2px 2px 5px black
    border-radius: 6px
    overflow: hidden
    background-color: rgb(58,47,38)

    @media only screen and (min-width: 1200px)
      height: 76px

    .play-text-container, .stats-text-container
      position: absolute

    .play-text-container
      right: 5px
      bottom: 0

      .play-text
        font-size: 18px
        line-height: 24px

    .stats-text-container
      left: 5px
      bottom: 0

      .stats-text
        font-size: 18px
        line-height: 24px

    .level-image
      @include transition(filter .10s linear, opacity .10s linear)
      filter: brightness(80%) contrast(80%)
      width: 100%
      height: 100%
      // Need to set an explicit height on .tile parent for this to work
      object-fit: cover

      &.placeholder
        filter: brightness(50%) contrast(80%)

    .overlay-text
      font-family: $headline-font
      font-variant: small-caps
      @include transition(color .10s linear, text-shadow .10s linear)
      color: black
      text-shadow: none

      &.dynamic-level-name
        position: absolute
        z-index: 1
        top: calc(37% - 23px)
        width: 100%
        text-align: center
        font-size: 24px
        color: $yellow
        text-shadow: 0px 1px 1px black, -1px 0px 1px black, 1px 0px 1px black, 0px -1px 1px black

    .tile-text-backdrop
      position: absolute
      bottom: 0
      left: 0
      right: 0
      height: 23px
      opacity: 90%
      background-color: #D0C4AC
      border: 2px solid #B5AA8F
      color: #B5AA8F
      border-top: 0
      @include transition(opacity .10s linear, background-color .10s linear, border-color .10s linear)

    &[disabled]
      opacity: 0.7
      cursor: default

    &:hover:not([disabled])
      div, .dynamic-level-name
        // TODO: is this duplicate? Do we need div?
        color: lighten($yellow, 20%)

      img.level-image
        filter: brightness(120%) contrast(100%)
        box-shadow: 0 0 5px black

      .overlay-text
        color: $yellow
        text-shadow: 0px 1px 1px black, -1px 0px 1px black, 1px 0px 1px black, 0px -1px 1px black

        &.dynamic-level-name
          text-shadow: 0px 2px 2px black, -2px 0px 2px black, 2px 0px 2px black, 0px -2px 2px black

      .tile-text-backdrop
        opacity: 75%
        background-color: darken(#D0C4AC, 10%)
        border-color: darken(#B5AA8F, 10%)

  .student-stats.deemphasize-ai-league
    .tile.play-arena-btn
      .level-image
        opacity: 20%

      &:hover
        .level-image
          opacity: 100%

        .dynamic-level-name:not(.optional)
          display: none

  .more-tournaments
    float: right
    color: #F7B42C

  @if $is-codecombat
    .school-stats
      font-family: $headline-font
      font-variant: small-caps

      .stat
        width: 100%
        height: 38px
        margin: 4px 0
        padding: 0 8px
        line-height: 32px
        background: rgb(58,47,38)
        color: rgb(195,153,124)
        border: 2px solid rgb(85,70,57)
        text-align: center

        &:hover
          background: rgb(33,28,21)
          border: 2px solid rgb(64,53,41)
          color: white

      .clan-list-container
        max-height: 160px
        overflow: scroll

      .team
        padding: 0
        border-radius: 2px
        margin: 4px 0
        height: 38px
        cursor: pointer

        .team-name, .team-stats
          display: inline-block
          margin: 0
          padding: 0 8px
          width: 50%
          overflow: hidden
          text-overflow: ellipsis
          white-space: nowrap
          height: 38px
          line-height: 32px

        .team-name
          background: rgb(58,47,38)
          color: rgb(195,153,124)
          border: 2px solid rgb(85,70,57)

          &:hover
            background: rgb(33,28,21)
            border: 2px solid rgb(64,53,41)
            color: white

        .team-stats
          color: black
          background-color: #D0C4AC
          border: 2px solid #B5AA8F

          &:hover
            background: darken(#D0C4AC, 10%)
            border: 2px solid darken(#B5AA8F, 10%)
            color: lighten(black, 10%)

    .loading-screen
      background-color: white
      margin: 0
      padding-bottom: 20px

    .help-block
      color: #333
